<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jquery3.3.1.js"></script>
</head>
<body> 
    <div id="box">0</div>
    <input type="button" value="添加节点" />
    <script>
        // after 
        // $(A).after(B) 表示将b插入到a之后
        // insertAfter
        // $(A).insertAfter(B) 表示将a插入到b之后

        // var i=0;
        // $("input").click(function(){
        //     i++;
        //     $("#box").after($("<div>"+i+"</div>"));
        //     $("<div>"+i+"</div>").insertAfter($("#box"));
        // })

        // before 
        // $(a).brfore(B)表示将b插入到a之前
        // insertBefore
        // $(a).insertBefore(B) 表示将a插入到b之前
        var i=0;
        $("input").click(function(){
            i++;
            $("#box").before($("<div>"+i+"</div>"));
            $("<div>"+i+"</div>").insertBefore($("#box"));
        })
    </script>
</body>
</html>